<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-demo</title>
</head>
<body>
<div id="app"></div>

  <!--引入vue.js包-->
  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <!---->
  <script type="text/javascript">
    /**
     * 使用步骤
     * 1.引包vue
     * 2.启动vue  通过new Vue(options);
     * 3.通过potions选项对象
     * 4.el:'目的地'  template:'模板'  data:function(){ return {要使用的key:数据} }
     * 5.页面中存在该目的地，目的地字符串描述同jq方式一样
     * */
    new Vue({
      //el:发生行为的目的地
      /**
       * el: '#app',
       * el: 'div',
       * 在vue的内部运行机制中，需要根据#xxx还是.xxx或div来判断并进行元素的查找
       * 使用document.getElementById('app')更为优化，将元素直接找到，避免vue来判断
       * */
      el:document.getElementById('app'),
      //template:装载的模板
      template: '<div><h2>大家好</h2> {{text}}</div>',
      //动态数据的声明
      data: function () { //也可使用对象
        return {
          //template中要使用的数据
          text: 'hello vue'
        }
      }
    });

  </script>
</body>
</html>
